<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>

<html>
<head>
<title>QnA</title>
<style>
body {
	font-family: Calibri;
}

table {
	border: 1px solid;
	border-collapse: collapse;
}

td {
	border: 1px solid;
}

th {
	text-align: left;
}
</style>
<link rel="stylesheet" type="text/css" href="./commons/jquery-ui.css" />

<script type="text/javascript" src="./commons/jquery.min.js"></script>
<script type="text/javascript" src="./commons/jquery-ui.min.js"></script>

</head>
<body>
	<div align="right">
		Logged in as <a href="<c:url value="/" />"><sec:authentication
				property="principal.username" /></a>
	</div>
	<h2>QnA</h2>
	<form:form method="post" action="save.html" modelAttribute="userForm">
		<table>
			<tr>
				<th>Question here:</th>
				<td><form:input path="shortDesc" /></td>
			</tr>
			<tr>
				<th>Related Product here**</th>
				<td><form:input path="relatedProduct" id="relatedProduct" /></td>
			</tr>
			<tr>
				<th>Related to Topic here**</th>
				<td><form:input path="relatedToTopic" id="relatedToTopic" /></td>
			</tr>
			<tr>
				<th>True or False</th>
				<td><form:select path="isTrueFalse" id="isTrueFalse">
						<form:option value="true">true</form:option>
						<form:option value="false">false</form:option>
					</form:select></td>
			</tr>
			<tr>
				<th>Answer: true</th>
				<td><form:select path="isTrue" id="isTrue">
						<form:option value="true">yes</form:option>
						<form:option value="false">no</form:option>

					</form:select></td>
			</tr>
			<tr>
				<th>Answer: false</th>
				<td><form:select path="isFalse" id="isFalse">
						<form:option value="true">yes</form:option>
						<form:option value="false">no</form:option>

					</form:select></td>
			</tr>
			<tr>
				<th>Multiple choice - one answer</th>
				<td><form:select path="isDropdown" id="isDropdown">
						<form:option value="true">true</form:option>
						<form:option value="false">false</form:option>
					</form:select></td>
			</tr>
			<tr>
				<th>No of options</th>
				<td><form:select path="numberOfOptions" id="numberOfOptions">
						<form:option value="1">1</form:option>
						<form:option value="2">2</form:option>
						<form:option value="3">3</form:option>
						<form:option value="4">4</form:option>
						<form:option value="5">5</form:option>
						<form:option value="6">6</form:option>
					</form:select></td>
			<tr>
			<tr>
				<th>a</th>
				<td><form:input path="optionOne" id="optionOne" /></td>
			</tr>
			<tr>
				<th>b</th>
				<td><form:input path="optionSecond" id="optionSecond" /></td>
			</tr>
			<tr>
				<th>c</th>
				<td><form:input path="optionThird" id="optionThird" /></td>
			</tr>
			<tr>
				<th>d</th>
				<td><form:input path="optionFourth" id="optionFourth" /></td>
			</tr>
			<tr>
				<th>e</th>
				<td><form:input path="optionFifth" id="optionFifth" /></td>
			</tr>
			<tr>
				<th>f</th>
				<td><form:input path="optionSixth" id="optionSixth" /></td>
			</tr>
			<tr>
				<th>Correct option</th>
				<td><form:select path="answer" id="answer">
						<form:option value="a">a</form:option>
						<form:option value="b">b</form:option>
						<form:option value="c">c</form:option>
						<form:option value="d">d</form:option>
						<form:option value="e">e</form:option>
						<form:option value="f">f</form:option>
					</form:select></td>
			<tr>
				<td colspan="2"><input type="submit" value="Save" /> <input
					type="reset" value="Reset" /></td>
			</tr>
			<tr style="display: none;">
				<th>id</th>
				<td><form:input path="timestamp" id="timestamp"
						style="display: none;" /></td>
			</tr>
		</table>
		<br />

	</form:form>
	<div align="left">
		<a>**Auto-fill enabled..</a>
	</div>

	<div align="right">
		<a href="<c:url value="j_spring_security_logout" />"> Logout</a>
	</div>

	<script type="text/javascript">
		function split(val) {
			return val.split(/,\s*/);
		}
		function extractLast(term) {
			return split(term).pop();
		}

		$(document)
				.ready(
						function() {

							$("#relatedProduct")
									.autocomplete(
											{
												source : '${pageContext. request. contextPath}/get_related_product_list.html'
											});

							$("#relatedToTopic")
									.autocomplete(
											{
												source : function(request,
														response) {
													$
															.getJSON(
																	"${pageContext. request. contextPath}/get_related_to_topic_list.html",
																	{
																		term : extractLast(request.term)
																	}, response);
												},
												search : function() {
													// custom minLength
													var term = extractLast(this.value);
													if (term.length < 1) {
														return false;
													}
												},
												focus : function() {
													// prevent value inserted on focus
													return false;
												},
												select : function(event, ui) {
													var terms = split(this.value);
													// remove the current input
													terms.pop();
													// add the selected item
													terms.push(ui.item.value);
													// add placeholder to get the comma-and-space at the end
													terms.push("");
													this.value = terms
															.join(", ");
													return false;
												}
											});

						});
	</script>

</body>
</html>
